<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box01 {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 10px solid #eee;
            margin-bottom: 30px;
            border-radius: 50%;
        }

        span {
            display: inline-block;
            font-size: 20px;
            -webkit-transform: scale(0.5);
        }

        .box02 {
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            border: 10px solid #eee;
            margin-top: 100px;
        }

        .box03 {
            box-sizing: border-box;
            width: 100px;
            height: 200px;
            margin-top: 50px;
            border: 1px solid pink;
        }

        .box04 {
            box-sizing: border-box;
            width: 50px;
            height: 100px;
            border: 1px solid yellow;
            margin-top: 100px;
        }

        .f {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .s {
            width: 200px;
            height: 200px;
            margin-top: 20px;
            background-color: blue;
        }

        .f3 {
            overflow: hidden;
            /* 第三种解决方式比较完美  不会改变布局宽高*/
        }

        .f {
            margin-top: 100px;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .father {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            margin-top: 20px;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: chocolate;
            margin-top: 50px;
            display: none;
        }
    </style>
    <script>
        var arr = [12, 342, 45, 23, 46, '我爱你', '哈哈哈']
        for (const item of arr) {
            console.log(item);
        }
        var person = {
            name: '张三',
            age: 23
        }
        let b = { ...person }
        let c = [...arr]
        console.log({ ...arr });
        console.log(b);
        console.log(c);
        let { name: aaa } = person
        console.log(aaa);
    </script>
</head>

<body>
    <div class="box01">
        <span>
            我爱你
        </span>
    </div>
    <div class="box02">

    </div>
    <div class="box03">
        <div class="box04"></div>
    </div>
    <div class="f f3">
        <div class="s s3"></div>
    </div>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <input type="date">
</body>

</html>